<!--详情页-->
<template>
  <el-row :gutter="10" style="width: 1200px;margin: 0 auto;">
    <el-col :span="18">
      <el-card>
        <h1 style="color:orange;text-align:center;">{{content.title}}</h1>
        <p style="font-size:12px;color:#666;text-align:center;">
          作者: {{ content.nickname }} | 发布时间: {{ content.createTime }} | 阅读次数: {{ content.viewCount }} </p>
        <hr>
        <div v-if="content.type!=2">
          <el-card>
            <span style="color:#0aa1ed;font-weight:bold;">摘要: </span>
            {{ content.brief }}
          </el-card>
          <div v-html="content.content"></div>
        </div>
        <div v-else>
          <video :src="'http:localhost:8080'+content.videoUrl" controls type="video/mp4"
                 style="width:100%;"></video>
        </div>
      </el-card>
      <!--评论相关开始-->
      <el-card style="margin-top:10px;">
        <p>发一条友善的评论</p>
        <hr>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-input placeholder="想不想说点啥?"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button>发布</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-for="item in 6" style="margin: 10px;">
          <el-col :span="2">
            <el-avatar style="margin:10px;"><img src="/imgs/head.jpg"></el-avatar>
          </el-col>
          <el-col :span="22">
            <p style="color:orange;font-weight:bold;margin: 0;font-size: 15px;">传奇哥</p>
            <p style="margin:2px 0;font-size: 13px;">看起来很好吃的样子...</p>
            <p style="font-size:12px;color:#666;margin: 0;">2024/2/19 15:38:23</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <!-- 详情页右侧部分开始 -->
    <el-col :span="6">
      <el-card>
        <div id="head-div"></div>
        <div style="text-align:center;position:relative;bottom:45px;">
          <el-avatar :size="90" :src="'http://localhost:8080'+content.userImgUrl" style="border:5px solid #fff;"></el-avatar>
          <p style="font-size:20px;font-weight:bold;margin: 5px 0;">{{ content.nickname }}</p>
          <el-icon class="head-icon"><Edit/></el-icon><span>本文作者</span>
          <br>
          <el-icon class="head-icon"><Clock/></el-icon><span>{{ content.createTime }}</span>
        </div>
      </el-card>

      <el-card style="margin-top:10px;">
        <h2>热门文章</h2>
        <hr>
        <el-row :gutter="10" v-for="item in 4">
          <el-col :span="10">
            <img src="/imgs/a.jpg" style="width:100%;">
          </el-col>
          <el-col :span="14">
            <p style="height:40px;margin-top:0;">这是内容标题</p>
            <p style="color:#666;font-size:12px;margin: 0;">2024/2/14</p>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin-top:10px;">
        <h2>作者其它文章</h2>
        <hr>
        <el-row :gutter="10" v-for="item in 4">
          <el-col :span="10">
            <img src="/imgs/a.jpg" style="width:100%;">
          </el-col>
          <el-col :span="14">
            <p style="height:38px;margin-top:0;">这是内容标题</p>
            <p style="color:#666;font-size:12px;margin: 0;">2024/2/14</p>
          </el-col>
        </el-row>
      </el-card>

    </el-col>
  </el-row>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
//1.定义对象保存内容详情
const content = ref({});
//2.跳转过来立即执行
onMounted(()=>{
  //3.拿到地址中的id
  let id = new URLSearchParams(location.search).get('id');
  //4.向后端发送请求获取数据
  axios.get(BASE_URL+'/v1/contents/'+id+'/detail').then((response)=>{
    if (response.data.code == 2000){
      content.value = response.data.data;
    }
  })
})
</script>

<style scoped>
#head-div {
  height: 90px;
  background-image: url("/public/imgs/avarbg.jpg");
}
.head-icon {
  font-weight:bold;
  color:orange;
  position:relative;
  top:3px;
  right:5px;
}
</style>